---
import AuthorCard from '@/components/AuthorCard.astro'
import BlogCard from '@/components/BlogCard.astro'
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Container from '@/components/Container.astro'
import Layout from '@/layouts/Layout.astro'
import { type CollectionEntry, getCollection } from 'astro:content'

export async function getStaticPaths() {
  const authors = await getCollection('authors')
  return authors.map((author) => ({
    params: { slug: author.slug },
    props: { author },
  }))
}

type Props = {
  author: CollectionEntry<'authors'>
}

const { author } = Astro.props

const allPosts = await getCollection('blog')
const authorPosts = allPosts
  .filter((post) => {
    return post.data.authors && post.data.authors.includes(author.slug)
  })
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
---

<Layout
  title={`${author.data.name} (Author)`}
  description={author.data.bio || `Profile of ${author.data.name}.`}
>
  <Container class="flex flex-col gap-y-6">
    <Breadcrumbs
      items={[
        { href: '/authors', label: 'Authors', icon: 'lucide:users' },
        { label: author.data.name, icon: 'lucide:user' },
      ]}
    />

    <section>
      <AuthorCard author={author} linkDisabled />
    </section>
    <section class="flex flex-col gap-y-4">
      <h2 class="text-2xl font-semibold">Posts by {author.data.name}</h2>
      {
        authorPosts.length > 0 ? (
          <ul class="not-prose flex flex-col gap-4">
            {authorPosts.map((post) => (
              <li>
                <BlogCard entry={post} />
              </li>
            ))}
          </ul>
        ) : (
          <p class="text-muted-foreground">
            No posts available from this author.
          </p>
        )
      }
    </section>
  </Container>
</Layout>